<template>
	<el-container>
		<el-main class="nopadding">
			<div class="top-panel">
				<!-- <el-tooltip class="box-item" effect="light" placement="right-start">
					<template #content>
						<div class="tips">
							{{ context }}
						</div>
					</template>
					<el-button>{{ $t('components.upload.title') }}</el-button>
				</el-tooltip> -->
				<span>{{ context }}</span>
			</div>
			<el-tabs type="border-card" @tab-change="changeTag">
				<el-tab-pane :label="item.name" v-for="(item, index) in tagList" :key="index" >
					<scTable v-if="index==tagIndex" ref="table" :apiObj="apiObj" row-key="id" stripe border :params="sendParams" :hideSetting="true"
						:sortType="direction">
						<el-table-column :label="$t('subscriptAudt_list.audtId')" prop="id" width="50"></el-table-column>
						<el-table-column :label="$t('subscript_list.pushType')" width="auto">
							<template #default="scope">
								{{ scope.row.pushType==1?$t('subscript_list.formLabel.pushSetTime'):$t('subscript_list.formLabel.pushNow') }}
							</template>
						</el-table-column>
						<el-table-column :label="$t('subscript_list.title')" width="auto">
							<template #default="scope">
								{{ setShortName(scope.row.theme, '') }}
							</template>
						</el-table-column>
						<el-table-column :label="$t('subscript_list.target')" width="auto">
							<template #default="scope">
								{{ scope.row.targetType==1?$t('subscript_list.formLabel.allUser'):scope.row.targetType==2?$t('subscript_list.formLabel.testUser'):$t('subscript_list.formLabel.Customize') }}
							</template>
						</el-table-column>
						<el-table-column :label="$t('subscript_list.expectedNumber')" prop="estimatedDeviceCount" width="auto"></el-table-column>
						<el-table-column :label="$t('subscript_list.actualNumber')" prop="actualSentCount" width="auto"></el-table-column>
						<el-table-column :label="$t('subscript_list.pushTime')" prop="sendTime"></el-table-column>
						<el-table-column :label="$t('table_data.operate')" width="auto">
							<template #default="scope">
								<el-button-group>
									<el-button-group>
										<el-button v-if="tagIndex==0" type="primary" size="small" @click="table_audit(scope.row)">{{ $t('subscriptAudt_info.auditBtn') }}</el-button>
										<!-- <el-button v-if="tagIndex==1" type="primary" size="small" @click="table_copy(scope.row, scope.$index)">{{ $t('subscript_list.copy') }}</el-button> -->
										 <div v-if="tagIndex==1">
											<el-tag v-if="scope.row.status==1" type="info">{{$t('subscript_list.statusCode1')}}</el-tag>
											<el-tag v-else-if="scope.row.status==2" type="warning">{{$t('subscript_list.statusCode2')}}</el-tag>
											<el-tag v-else-if="scope.row.status==3" type="success">{{$t('subscript_list.statusCode3')}}</el-tag>
											<el-tag v-else-if="scope.row.status==4" type="danger">{{$t('subscript_list.statusCode4')}}</el-tag>
											<el-tag v-else-if="scope.row.status==5" type="danger">{{$t('subscript_list.statusCode5')}}</el-tag>
											<el-tag v-else type="danger">{{$t('subscript_list.statusCode6')}}</el-tag>
										 </div>
										<el-popconfirm :title="$t('table_data.auditContextCancel')" @confirm="table_cancel(scope.row, scope.$index)" v-if="tagIndex==2&&scope.row.pushType==1">
											<template #reference>
												<el-button type="danger" size="small">{{ $t('subscript_list.pushNotMess') }}</el-button>
											</template>
										</el-popconfirm>
									</el-button-group>
								</el-button-group>
							</template>
						</el-table-column>
					</scTable>
				</el-tab-pane>
			</el-tabs>
		</el-main>
	</el-container>
	<!-- <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog> -->
</template>

<script>
import saveDialog from './client/save'

export default {
	name: "client",
	components: {
		saveDialog
	},
	data() {
		return {
			tagList: [
				{
					name: this.$t('subscriptAudt_list.tag1'),
				},
				{
					name: this.$t('subscriptAudt_list.tag2'),
				},
				{
					name: this.$t('subscriptAudt_list.tag3'),
				}
			],
			tagIndex: 0,
			context: this.$t('subscriptAudt_list.listTips'),
			isEdit: false,
			direction: 'sortDirection',
			dialog: {
				save: false
			},
			search: {
				keyword: ""
			},
			apiObj: {},
			selection: [],
			searchKey: null,
			params: {
				
			},
			sendParams: {
				status: 1
			},
      defaultTime: [new Date(2000,1,1,23,59,59)],
			creatorIdList: []
		}
	},
	computed: {
		oicon(){
			return function(e){
				return e
			}
		},
		setShortName(){
			return (e, lang)=>{
				if(lang)return e&&e[lang];
				return e&&e[this.$i18n.locale]
			}
		},
	},
	async created() {
		this.apiObj = this.$API.subscription.getSubScriptionList;
	},
	methods: {
		changeTag(e) {
			this.$nextTick(()=>{
				switch(e) {
					case "0":
						this.sendParams.status = 1;
						// this.$refs.table.upData();
						break;
					case "1":
						this.sendParams.status = 2;
						// this.$refs.table.upData();
						break;
					case "2":
						this.sendParams.status = 3;
						// this.$refs.table.upData();
						break;
				}
				this.tagIndex = e;
			})
		},
		saveCount(item) {
			let params = {
			  sort: Number(item.sort),
			}
			let id = item.id;
			this.$API.rule.putSeriesData.put(id, params).then((res) => {
				if(res.code == 'OK') {
					this.$message.success(this.$t('table_data.operasucc'));
					this.isEdit=false;
					this.upsearch();
				}
			});
		},
		closeTag() {
			const tagList = this.$store.state.viewTags.viewTags;
			const tag = this.$route;
			const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
			this.$store.commit("removeViewTags", tag)
			this.$store.commit("removeIframeList", tag)
			this.$store.commit("removeKeepLive", tag.name)

			const leftView = tagList[nowTagIndex - 1]
			if (leftView) {
				this.$router.push(leftView)
			} else {
				this.$router.push('/')
			}
		},
		reset() {
			this.previewStartTime = null;
			this.previewEndTime = null;
			this.creatorId = null;
			this.availabl = true;
			this.upsearch();
		},
		upsearch() {
			Object.assign(this.sendParams,this.params);
			// if(this.sendParams.startDate)this.sendParams.startDate = this.$TOOL.getLocalTime(9,this.params.startDate,true)//this.$TOOL.dateFormat(this.sendParams.startDate);
			// if(this.sendParams.endDate)this.sendParams.endDate = this.$TOOL.getLocalTime(9,this.params.endDate,true)//this.$TOOL.dateFormat(this.sendParams.endDate);
			this.$refs.table[0].upData(this.sendParams);
		},
		//增加
		add() {
			this.$router.push({path:'/subscriptionTable/subscriptionList/client/save',query:{type:'add','id':'add'}});
		},
		//编辑
		table_audit(row){
			this.$router.push({path:'/subscriptionTable/subscriptionList/client/save',query:{type:'audit','id':row.id }});
		},
		// 推送
		async table_push(row){
			var res = await this.$API.rule.delCategory.delete(row.id);
			if(res.code == 'OK'){
				this.$refs.table.upData(this.params);
				this.$message.success(this.$t('table_data.delsucc'))
			}else{
				this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
			}
		},
		// 取消推送
		async table_cancel(row) {
			var res = await this.$API.subscription.putCancelSubscription.put(row.id);
			if(res.code == 'OK'){
				this.upsearch();
				this.$message.success(this.$t('table_data.operasucc'))
			}else{
				this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
			}
			
		},
		// 复制
		table_copy(row){
			this.$router.push({path:'/subscriptionTable/subscriptionList/client/save', query:{type:'copy', 'id': row.id }});
		},
		//删除
		async table_del(row) {
			var res = await this.$API.rule.delCategory.delete(row.id);
			if(res.code == 'OK'){
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.$refs.table.upData(this.params);
				this.$message.success(this.$t('table_data.delsucc'))
			}else{
				this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
			}
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				data.id = new Date().getTime()
				this.$refs.table.tableData.unshift(data)
			} else if (mode == 'edit') {
				this.$refs.table.tableData.filter(item => item.id === data.id).forEach(item => {
					Object.assign(item, data)
				})
			}
		},
		beforeOptions(v){
			if(!this.params.previewEndTime)return false
			return v.getTime() > new Date(this.params.previewEndTime).getTime();//  - 86400000是否包括当天
		},
		backOptions(v){
			return v.getTime() < new Date(this.params.previewStartTime).getTime();//  - 86400000是否包括当天
		},
	}
}
</script>

<style scoped>
:deep(.minscTable) {
	min-width: 100% !important;
}
.module-filter {
	margin-right: 10px;
}

.el-header {
	--el-header-height: auto;
}

.editBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.left-panel {
	flex-wrap: wrap;
	line-height: 50px;
}

.top-panel {
	margin: 10px;
}

.scTable {
	height: calc(100% - 60px) !important;
}

.el-main.nopadding {
	margin: 0 10px;
}

.el-header {
	margin: 10px;
	border-radius: 4px;
}

@media only screen and (max-width: 820px) and (min-width: 768px) {
	.module-filter {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    margin: 0 10px;
	}
	.btns {
    margin: 10px;
    width: 340px;
    flex-direction: row;
	}
}
</style>
